<template>
    <!-- 接收参数isShow是否显示-->
    <!-- 返回事件close select-->
    <van-popup v-if="isShow" v-model="show" closeable round position="bottom" 
        :style="{ height: '40%' }">
        <div class="popup-container">
            <div class="popup-title-container">
                <h3>选择权钥</h3>
            </div>

            <van-loading v-if="!weap_list" size="24px">加载中...</van-loading>

            <van-row class="row-title1 margin-top border-top" v-if="weap_list">
                <van-col>专武</van-col>
                <van-col>通用</van-col>
                <van-col>过渡</van-col>
            </van-row>

            <van-row class="row-title2 margin-top border-top" v-if="weap_list">
                <van-col style="color:goldenrod">5星</van-col>
                <van-col style="color:goldenrod">5星</van-col>
                <van-col style="color:purple">4星</van-col>
                <van-col style="color:purple">4星</van-col>
                <van-col style="color:skyblue">3星</van-col>
            </van-row>

            <van-row class="row-icon border-top" v-if="weap_list && currentRole">
                <template v-for="(item) in weap_list">
                    <van-col class="mouse-point" @click.native="onSelect(item)"  v-show="isItemShow(item)">
                        <van-image :src="item.icon"></van-image>
                    </van-col>
                </template>
            </van-row>

            <van-row class="row-name1 border-top" v-if="weap_list && currentRole">
                <template v-for="(item) in weap_list">
                    <van-col @click.native="onSelect(item)"  v-show="isItemShow(item)">
                        <span class="per-name">{{ item.per_name }}</span>
                    </van-col>
                </template>
            </van-row>

            <van-row class="row-name2 border-top border-bottom" v-if="weap_list && currentRole">
                <template v-for="(item) in weap_list">
                    <van-col @click.native="onSelect(item)"  v-show="isItemShow(item)">
                        <span class="real-name">{{ item.real_name }}</span>
                    </van-col>
                </template>
            </van-row>
        </div>
    </van-popup>
</template>

<script>
import { SearchServer, TeamServer } from '../../server/servers';

export default {
    name: "",
    props: {
        isShow: Boolean,
        currentRole: null,
    },

    created() {
        setTimeout(() => {
            this.query();
        }, 2000);
    },

    computed:{
        show:{
            get(){
                return this.isShow
            },
            set(v){
                v?null:this.$emit("close")
            }
        }
    },

    data: () => ({
        weap_list: [],
    }),

    methods: {
        onSelect(item) {
            this.$emit("select", item);
            this.$emit("close");
        },

        query() {
            this.weap_list = TeamServer.queryAllWeaps();
            //已经重新排序 专属在前 通用按等级降序
            // this.weap_list.some(e=>{
            //     console.log(e.real_name,e.class,e.exclusive)
            // });
        },

        isItemShow(item) {
            if (item.exclusive != "") {
                return this.currentRole.role_name.match(item.exclusive);
            } else {
                return this.currentRole.role_class == item.class;
            }
        }
    }
}
</script>

<style scoped>
.popup-container {
    /* position: relative; */
    width: 80%; 
    height: 80%;
    margin: 5% 10%;
    /* overflow-y: scroll; */
    /* margin-top: 100px; */
}

.popup-title-container {
    /* position: absolute; */
    /* width: 500px; */
    top: 12px;
    left: 0px;
}

.popup-title-container h3 {
    display: block;
    width: 75px;
    margin: auto;
}

.van-loading{
    padding-left:40%;
    margin-top:20px;
}

.van-col{
    width:20%;
    text-align: center;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
}

.row-icon .van-col{
    height: auto;
}

.row-title1, .row-title2{
    font-weight: bold;
}

* {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default
}
</style>


